<form>
    <div class="modal-header">
        <h4>找回密码</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onClose()">
            <span>&times;</span>
        </button>
    </div>

    <div class="modal-body">
        <mat-card *ngIf="status === 'begin'">
            <div class="row">
                <div class="col">
                    <span>请输入你的电子邮箱地址，以便找回密码：</span>
                    <br><br>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="email" type="email" placeholder="电子邮箱" maxlength="50">
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('required')">
                            必须输入电子邮箱地址！
                        </mat-error>
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('email')">
                            电子邮箱地址无效！
                        </mat-error>
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('maxlength')">
                            本字段长度不能超过50个字符！
                        </mat-error>
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('minlength')">
                            本字段长度最少5个字符！
                        </mat-error>
                        <mat-error *ngIf="email.hasError('noExist')">
                            该email地址不存在，请另外选择一个！
                        </mat-error>
                        <mat-error *ngIf="email.pending">
                            正在验证email地址......
                        </mat-error>
                    </mat-form-field>
                </div>
                <div class="col">
                    <mat-form-field>
                        <input matInput [formControl]="myCode" type="text" placeholder="校验码">
                    </mat-form-field>
                    <a (click)="getVerifyCode()">
                        <img src="{{verifyPicture}}" alt="获取验证码">
                    </a>
                </div>
            </div>
        </mat-card>

        <mat-card *ngIf="status === 'find_sucess' || status === 'reset_fail'">
            <div class="alert alert-success">
                <p>密码重置密钥已发送至你提供的电子邮箱： {{email.value}}</p>
                <p>请在下面输入重置密钥和你的新密码...</p>
            </div>
            <div class="row">
                <div class="col">
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="resetKey" placeholder="20位数字密码重置密钥">
                        <mat-error *ngIf="(resetKey.dirty || resetKey.touched) && (resetKey.hasError('maxlength') || resetKey.hasError('minlength'))">
                            密钥必须为20位数字！
                        </mat-error>
                    </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="password" type="password" placeholder="新密码" (change)="confirmPassword.setValue('')">
                        <mat-error *ngIf="password.value && password.hasError('passwordStrong')">
                            {{password.errors.passwordStrong.value}}
                        </mat-error>
                    </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="confirmPassword" type="password" placeholder="再次输入新密码">
                        <mat-error *ngIf="confirmPassword.value && confirmPassword.hasError('passwordMatch')">
                            {{confirmPassword.errors.passwordMatch.value}}
                        </mat-error>
                    </mat-form-field>
                </div>
            </div>
            <div *ngIf="status == 'reset_fail'">
                <div class="alert alert-danger">
                    <p>密码重置失败！请检查重置密钥是否有效...</p>
                </div>
            </div>
        </mat-card>

        <mat-card *ngIf="status == 'find_fail'">
            <div class="alert alert-danger">
                <p>发送找回密码邮件失败，请检查邮箱地址和验证码是否正确...</p>
            </div>
        </mat-card>

    </div>

    <div class="modal-footer">
        <button mat-raised-button (click)="onClose()">
            <span class="fa fa-ban">&nbsp;取消</span>
        </button>
        <button mat-raised-button color="primary" (click)="findPassword()" [disabled]="email.invalid || myCode.invalid" *ngIf="status === 'begin'">
            <span class="fa fa-check-circle">&nbsp;找回密码</span>
        </button>
        <button mat-raised-button color="primary" (click)="resetPassword()" *ngIf="status === 'find_sucess' || status === 'reset_fail'"
                [disabled]="resetKey.invalid || password.invalid || confirmPassword.invalid">
            <span class="fa fa-check-circle">&nbsp;重置密码</span>
        </button>
    </div>

</form>

